import { useEffect, useRef, useState } from "react";
import "../../../../assets/sass/home_page/free_templates/featured_picks/today_recommend/boxc_type_five/boxc_type_five.css";
import { EyeFilled, StarFilled, CaretRightFilled } from "@ant-design/icons";
import { Progress } from "antd";

const BoxcTypeFive = () => {
  const videoRef = useRef(null);
  const [progress, setProgress] = useState(null);
  const [duration, setDuration] = useState(null);
  useEffect(() => {
    (async () => {
      if (videoRef.current) {
        videoRef.current.pause();
      }
      const videoDom = document.getElementById("progress");
      videoUpdata(videoDom);
    })();
  }, []);
  const videoMouseEnter = () => {
    if (videoRef.current) {
      videoRef.current.play();
      setDuration(videoRef.current.duration.toFixed(0));
    }
  };

  const videoMouseLeave = () => {
    if (videoRef.current) {
      videoRef.current.pause();
    }
    const doms = document.querySelectorAll(".boxc_type_five");
    doms.forEach((item) => {
      item.classList.add("boxc_type_five_leave");
    });
  };

  const videoUpdata = (videoDom: HTMLElement) => {
    videoDom.addEventListener("timeupdate", () => {
      setProgress(
        (
          (videoRef.current.currentTime / videoRef.current.duration) *
          100
        ).toFixed(1)
      );
    });
  };

  return (
    <div
      className="boxc_type_five"
      onMouseEnter={videoMouseEnter}
      onMouseLeave={videoMouseLeave}
    >
      <div className="video_box">
        <video
          id="progress"
          ref={videoRef}
          className="video"
          src="/src/assets/image/home_page/main/box_type_five/video.mp4"
        ></video>
        <Progress
          className="progress"
          percent={progress}
          showInfo={false}
          size="small"
          strokeLinecap="butt"
        />
      </div>
      <div className="bottom_bar">
        <div className="text">简约蓝天毕业季青春不散场开场片头</div>
        <div className="user_info">
          <div className="user">
            <div className="avatar">
              <img src="/src/assets/image/home_page/main/box_type_two/userinfo/avatar.jpg" />
            </div>
            <div className="username">诺来工作室</div>
          </div>
          <div className="see">
            <EyeFilled className="eye_icon" />
            <span className="see_num">398</span>
          </div>
        </div>
      </div>
      <div className="collection">
        <StarFilled />
      </div>
      <div className="free_text">免费</div>
      <div className="duration">
        <CaretRightFilled />
        <span>00:{duration}</span>
      </div>
    </div>
  );
};

export default BoxcTypeFive;
